Merope

About

Merope

HTML5 Material Design Style Template

Merope is Responsible One Page HTML5 Material Design Style Template built with Bootstrap 3 framework.

Structure

Files Structure

Once downloaded, unzip the compressed folder to see the structure of the Merope. You'll see next structure:

html template/
    ├── css/
    │   ├── bootstrap.css
    │   ├── bootstrap.min.css
    │   ├── coming-soon.css
    │   ├── font-awesome.css
    │   ├── font-awesome.min.css
    │   ├── chocolat.css
    │   ├── main.css
    │   ├── material-kit.css
    │   └── slick.css
    ├── fonts/
    │   ├── font-awesome.eot, font-awesome.svg, font-awesome.ttf
    │   ├── font-awesome.woff, font-awesome.woff2
    │   ├── MaterialIcons-Regular.eot, MaterialIcons-Regular.svg, MaterialIcons-Regular.ttf
    │   └── MaterialIcons-Regular.woff, MaterialIcons-Regular.woff2
    ├── img/
    │   ├── clients/
    │       └── *images
    │   ├── parallax/
    │       └── *images
    │   ├── screens/
    │       └── *images
    │   ├── thumbs/
    │       └── *images
    │   └── *images
    ├── js/
    │   └── vendor/
    │       └── *for detailed list see js section
    │   ├── bootstrap.js
    │   ├── bootstrap.min.js
    │   ├── bootstrap-datepicker.js
    │   ├── comingsoon.js
    │   ├── contact.js
    │   ├── main.js
    │   ├── material.min.js
    │   └── mymap.js
    ├── php/
    │   ├── phpmailer/
    │   ├── contact-form.php
    │   └── newsletter.php
    ├── 404.html
    ├── about.html
    ├── comingsoon.html
    ├── contact.html
    ├── index.html
    ├── index-slider.html
    ├── index-video.html
    └── shortcodes.html

Html Structure

This theme is a responsive layout based on Bootstrap 3. All information within the main content area is nested within a body tag. The general template structure is the same throughout the template.

General structure: Navbar + Header - Main - Footer

layout

Simple HTML Boilerplate (index.html):

<!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <title>Merope</title> ... <!-- FONTS --> ... <!-- CSS --> ... <!-- Favicon --> ... <script src="js/vendor/modernizr.js"></script> </head> <body> <!-- Header --> <header id="home" class="header flex flex-middle" role="banner"> <div class="container"> <!-- Navbar --> <nav class="navbar navbar-inverse navbar-transparent navbar-fixed-top" role="navigation"> ... </nav> <!-- Header Content --> <div class="heading"> ... </div> </div> </header> <!-- Content --> <main class="main" role="main"> <!-- Section About / Features --> <section class="section features text-center"> ... </section> <!-- Section Statistics --> <section class="section statistics text-center"> ... </section> ... </main> <!-- Footer --> <footer class="footer" role="contentinfo"> ... </footer> <!-- Scripts –––––––––––––––––––––––––––––––––––––––––––––––––– --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.4.min.js"></script>')</script> <script src="js/bootstrap.min.js"></script> <script src="js/material.min.js"></script> <script src="js/vendor/jquery.appear.js"></script> ... ... <script src="js/main.js"></script> </body> </html>

CSS Structure

All css files are located in css folder:

main.css

This file includes css styles for pages. If you want to change style, colors, margin, padding, font settings etc. of the template you should start from this file.

/* Table of Contents
=================================================== */
/*
 * Default
   * Titles
   * Flexbox
 * Cards
 * Components
   * Icon Box
   * Breadcrumbs
   * Pagination
   * Modal
 * Material Icons
 * Preloader
 * Header
   * Sample Pages Header Image
 * Navbar
 * Main
   * Section
   * Offset wrapper
 * Social List
 * Features
 * Statistics
 * Team
 * Skills
 * Portfolio
   * Masonry
   * Filter
 * Testimonials
 * Services
 * Brands
 * Call To Action
 * Blog
   * Meta
   * Post
   * Tags
   * Comments
   * Widgets
 * Promo
 * Pricing
 * Google Map
 * Contact
 * Footer
 * Newsletter
 * Project
 * Page 404
*/

Example:

    	
    /* Header
    =================================================== */
   .header {
      background: url(../img/dp2b.jpg) no-repeat scroll center center rgba(255, 255, 255, 0.75);
      background-size: cover;
      color: #fff;
      width: 100%;
      height: 100%;
      padding: 0;
      position: relative;
   }

bootstrap.css, bootstrap.min.css

Bootstrap 3 Framework base stylesheets. Includes all components and elements, typography, lists, buttons, button groups, navigations, navbars, forms, labels, pricing tables and much more. This stylesheet must always be included! We recommend minified version bootstrap.min.css for use. For development you can use bootstrap.css.

material-kit.css

Material Kit stylesheet. Includes Material design styles for Bootstrap components. This stylesheet must be placed after Bootstrap base stylesheet (bootstrap.min.css or bootstrap.css)!

Javascript

All Javascript files are located in js folder.

Be sure: If you create a new page:

If you use a form (contact form, subscribe form), make sure you have inserted:

<script src="js/vendor/jquery.validate.min.js"></script> <script src="js/contact.js"></script>

If you use Google Map, make sure you have inserted:

<!-- Google Map --> <script src="https://maps.googleapis.com/maps/api/js?key=YourApiKey"></script> <script src="js/mymap.js"></script>

Installation

Getting the Template Online

Warning! This is not a Wordpress template. Running, uploading or inserting in Wordpress CMS will have no effect.

This is HTML5 template, you do not need create a database. Just simply upload to the server.

  1. It's important to understand that you must either have your own server space or use someone elses. The server space can be purchased at many different places around the internet. You need somewhere to put the files that you purchased so others can find them online.

  2. The template folder will have several files with the extension labeled .html. This is where all your content will. It's very important to keep the css and js-plugin folders with the HTML or the HTML will not look how the design is meant to look. Along with the HTML files, you will also have four additional folders to upload: css, js, fonts, and images.

  3. Start your FTP client (Total Commander or FileZilla) and login. Login to your server. You will need your server name (often times this will be your domain name), username, and password that you setup with the hosting company.

php Contact Form and Twitter Feed working only in server environment with installed php.
Load your content on server or use webserver on your machine.

Customization

Layout Settings

Insert your content, write your text, load your photos and images. Compress the size of images and photos. Demo template uses high resolution images, but for normal use it is not appropriate. High-res photos = slow website loading.

You can change HTML structure. Move sections in main content as needed.

Fonts

Google Fonts

We use free Google font: Roboto Condensed

Icons

Default Icon font for our template is Material icons.

Basic structure: <i class="material-icons">local_pizza</i>

Replace icon name inside i tag, example local_pizza, with the actual icon name you wish to display, example chevron_left. Then your new icon is <i class="material-icons">chevron_left</i>

See also: Material Icons Guide

Secondary Icon font is Font Awesome. Is used especially for social icons but you can use it anywhere.

Basic structure: <i class="fa fa-facebook"></i>

Replace icon name (icon name = css class), example fa-facebook, with the actual icon name you wish to display, example fa-home. Then your new icon is <i class="fa fa-home"></i>


Important: Google Font Roboto Condensed and Google Material Icons are used as hosted libraries.

The recommended way to use the Material Icons font and all Google Font´s is by linking to the web font hosted on Google Fonts.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700' rel='stylesheet' type='text/css'>

If you need to install Material Icons locally - remove Material Icons link in html files (index.html, post.html, project.html, etc.) and uncomment /* */ @font-face in main.css

/* Material Icons
=================================================== */
/*  <--remove
 @font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/MaterialIcons-Regular.eot);
  src: local('../fonts/Material Icons'),
       local('../fonts/MaterialIcons-Regular'),
       url(../fonts/MaterialIcons-Regular.woff2) format('woff2'),
       url(../fonts/MaterialIcons-Regular.woff) format('woff'),
       url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
}
*/  <--remove

Statistics - Counters

Setting the counters make directly in HTML code. Open index.html and follow the example below:

Change number value data-percent="number"

<!-- Section Statistics --> <section class="section statistics text-center"> <div class="container"> <div class="row"> <div class="col-xs-6 col-md-3"> <div class="statistic"> <div class="stat-item" data-percent="35"></div> <span class="stat-number"></span> </div> <h4 class="title">Creative Ideas</h4> </div> <div class="col-xs-6 col-md-3"> <div class="statistic"> <div class="stat-item" data-percent="95"></div> <span class="stat-number"></span> </div> <h4 class="title">Projects Live</h4> </div> <div class="clearfix hidden-md hidden-lg"></div><!-- Clearfix --> <div class="col-xs-6 col-md-3"> <div class="statistic"> <div class="stat-item" data-percent="75"></div> <span class="stat-number"></span> </div> <h4 class="title">Awards winners</h4> </div> <div class="col-xs-6 col-md-3"> <div class="statistic"> <div class="stat-item" data-percent="55"></div> <span class="stat-number"></span> </div> <h4 class="title">Happy Customers</h4> </div> </div> </div> </section>

Progress Bars

Set value in HTML code. Open index.html and follow the example below:

Change number value aria-valuenow="number"

<!-- Progress bars --> <div class="progress-bars"> <div class="progress-wrap"> <p>HTML5 &amp; CSS3</p> <div class="progress"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="92" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">92% Complete</span> <span class="bar-value"></span> </div> </div> </div> ...

Location - Google Map

To edit the Google Map style and location marker please open mymap.js in your favorite text editor. Edit the location marker, enter your Address on line 16.

    	
    
    /*global google, alert*/
    var map;

    function initMap() {
        "use strict";
        
	// Set address here
	var address = '795 Folsom Ave, San Francisco, CA 94103',
	
	    paper = [
	    ...

If you put your map online you may need to control if the requests quota is not exceeded and be able to increase it. With an API key you can also set which web domains are allowed to access your maps – this will protect you from any unauthorized usage. To get it visit Google Maps APIs.

For further documentation and setting information, see: Google Developers: Google Maps APIs for Web.

Contact Form / Newsletter Form

This template contains fully working contact form and newsletter form. Forms used:

  1. jQuery Validation Plugin form validation library

  2. script contact.js (must be included before end body tag - see chapter Javascript)

  3. php file: contact-form.php or newsletter-form.php

All you need is replace your actual email address.

In order to receive messages you need to edit line 8 of php/contact-form.php and php/newsletter-form.php file. Just write your own email address:

<?php ... // Enter your email address - edit line 8 $to = "your@mail.com"; < === HERE REPLACE YOUR EMAIL ADDRESS ... ?>

Chocolat.js enables you to display one or several images staying on the same page. The choice is left to the user to group together a series of pictures as a link, or let them appear as thumbnails. The viewer may appears full-page or in a block.

You can see Lightbox in action on post.html, post-sidebar.html pages.

We use ul > li structure and Bootstrap row with columns for sizing. You can also use a structure with div.

<ul class="gallery row" data-chocolat-title="Gallery"> <li class="col-md-4"> <figure> <a href="img/dp1a.jpg" class="chocolat-image"> <img src="img/dp1a.jpg" alt="img"> </a> </figure> </li> <li class="col-md-4"> <figure> <a href="img/dp2b.jpg" class="chocolat-image"> <img src="img/dp2b.jpg" alt="img"> </a> </figure> </li> <li class="col-md-4"> <figure> <a href="img/wspace.jpg" class="chocolat-image"> <img src="img/wspace.jpg" alt="img"> </a> </figure> </li> </ul>

For further documentation and setting information, see: Chocolat.js website.

Color Filter

Sections with background images using a color filters. If the image is too bright or too dark or if the font is not visible or if you need a better look. You can easily customize it as needed.

Edit background color for ::before

.header { background: url(../img/dp2b.jpg) no-repeat scroll center center rgba(255, 255, 255, 0.75); background-size: cover; color: #fff; width: 100%; height: 100%; padding: 0; position: relative; &::before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0,0,0,0.25); } }

Variant 1: Use rgba color:

background-color: rgba(0,0,0,0.25);

Variant 2: Use hex or rgb color and opacity:

background-color: #000000; opacity: 0.25;

Coming Soon Page (comingsoon.html)

Rename coming-soon.html to index.html before uploading to server.

Counter

Open comingsoon.js. Just edit date at line 12. Use date format YYYY/MM/DD or YYYY/MM/DD HH:MM:SS

	/*global $, jQuery*/
	$(document).ready(function () {
   		"use strict";
   		...
   		// ----------------------------
   		// Countdown Timer
   		// ----------------------------
   		$('#timer').countdown('2016/12/31', function (event) { //set date YYYY/MM/DD or YYYY/MM/DD HH:MM:SS
    		var format = "..........";
    		$(this).html(event.strftime(format));
   		});
   		...
	});

For further information about countdown plugin, see The Final Countdown Website.

Progress Bar

Open comingsoon.js. Edit line 24. This is interval length between start and end. Example: Your page is offline from 01. June to 30. June = 30 days. Then set line 24: var totalDays = 30,

	/*global $, jQuery*/
	$(document).ready(function () {
   		"use strict";
   		...
        // ----------------------------
        // Progressbar
        // ----------------------------
	    $(function () {
		    var totalDays = 365, // 365 = 365 days = 1 year, set this value as interval length between start and end
			    days = $('#timer').find('.tcard:first').text(),
			    value = parseInt(days, 10),
			    valueNow = totalDays - value;
		    $('.progress-bar').css({
			    "width": valueNow + 'px'
		    }).attr({
			    "aria-valuenow": valueNow,
			    "aria-valuemax": totalDays
		    });
	    });
   		...
	});

Credits

Plugins, files, extensions and libraries used in template

Framework

Framework

Fonts

Photos
Images are not included in download package

Support

Please feel free to contact us, if you have question or problem about this template.
Guarantee support for HTML and CSS issues. Troubleshooting with javascript and jquery - we will do what we can.

Thank you for purchasing our theme. We look forward to equally successful cooperation in the future!

Your Themekiosk Team

Changelog

Update to v1.1:

updated:

Changes